<template>
  <div class="elegant-dashboard">
    <!-- 信息模块 -->
    <div class="module-card">
      <h4 class="module-title">
        <i class="el-icon-truck"></i>
        信息模块
      </h4>
      <div class="module-grid cols-2">
        <div class="sub-module">
          <div class="sub-header">
            <i class="el-icon-s-management"></i>
            信息管理
          </div>
          <div class="sub-item" @click="goToModule('dispatch')">销售统计</div>
        </div>
        <div class="sub-module">
          <div class="sub-header">
            <i class="el-icon-office-building"></i>
            销售信息
          </div>
          <div class="sub-item" @click="goToModule('vehicle')">车辆管理</div>
          <div class="sub-item" @click="goToModule('driver')">司机管理</div>
          <div class="sub-item" @click="goToModule('transport')">运输订单管理</div>
          <div class="sub-item" @click="goToModule('delivery')">配送单管理</div>
        </div>
      </div>
    </div>

    <!-- 订单模块 -->
    <div class="module-card">
      <h4 class="module-title">
        <i class="el-icon-tickets"></i>
        订单模块
      </h4>
      <div class="module-grid cols-2">
        <div class="sub-module">
          <div class="sub-header">
            <i class="el-icon-wallet"></i>
            待结算订单
          </div>
          <div class="sub-item" @click="goToModule('salesOrder')">销售订单</div>
          <div class="sub-item" @click="goToModule('leaderOrder')">团长订单</div>
          <div class="sub-item" @click="goToModule('bloggerOrder')">博主订单</div>
          <div class="sub-item" @click="goToModule('logisticsOrder')">物流商订单</div>
          <div class="sub-item" @click="goToModule('supplierOrder')">供应商订单</div>
        </div>
        <div class="sub-module">
          <div class="sub-header">
            <i class="el-icon-s-order"></i>
            订单
          </div>
          <div class="sub-item" @click="goToModule('orderMaintain')">订单维护</div>
          <div class="sub-item" @click="goToModule('orderManage')">订单管理</div>
        </div>
      </div>
    </div>

    <!-- 仓储模块 -->
    <div class="module-card">
      <h4 class="module-title">
        <i class="el-icon-house"></i>
        仓储模块
      </h4>
      <div class="module-grid cols-2">
        <div class="sub-module">
          <div class="sub-header">
            <i class="el-icon-box"></i>
            仓储管理
          </div>
          <div class="sub-item" @click="goToModule('inbound')">入库管理</div>
          <div class="sub-item" @click="goToModule('warehouse')">仓库管理</div>
          <div class="sub-item" @click="goToModule('inventory')">库存管理</div>
          <div class="sub-item" @click="goToModule('outbound')">出库管理</div>
          <div class="sub-item" @click="goToModule('processing')">加工管理</div>
        </div>
        <div class="sub-module">
          <div class="sub-header">
            <i class="el-icon-school"></i>
            仓储
          </div>
          <div class="sub-item" @click="goToModule('warehouseManage')">仓库管理</div>
        </div>
      </div>
    </div>

    <!-- 物流模块 -->
    <div class="module-card">
      <h4 class="module-title">
        <i class="el-icon-truck"></i>
        物流模块
      </h4>
      <div class="module-grid cols-2">
        <div class="sub-module">
          <div class="sub-header">
            <i class="el-icon-s-management"></i>
            物流管理
          </div>
          <div class="sub-item" @click="goToModule('dispatch')">调度单管理</div>
          <div class="sub-item" @click="goToModule('logisticsVendor')">物流商管理</div>
          <div class="sub-item" @click="goToModule('transportOrder')">平台运输订单</div>
          <div class="sub-item" @click="goToModule('outbound')">出库单管理</div>
        </div>
        <div class="sub-module">
          <div class="sub-header">
            <i class="el-icon-office-building"></i>
            物流商
          </div>
          <div class="sub-item" @click="goToModule('vehicle')">车辆管理</div>
          <div class="sub-item" @click="goToModule('driver')">司机管理</div>
          <div class="sub-item" @click="goToModule('transport')">运输订单管理</div>
          <div class="sub-item" @click="goToModule('delivery')">配送单管理</div>
        </div>
      </div>
    </div>

    <!-- 结算模块 -->
    <div class="module-card">
      <h4 class="module-title">
        <i class="el-icon-money"></i>
        结算模块
      </h4>
      <div class="module-grid cols-3">
        <div class="sub-module">
          <div class="sub-header">
            <i class="el-icon-document"></i>
            协议管理
          </div>
          <div class="sub-item" @click="goToModule('settlementAgreement')">结算协议</div>
          <div class="sub-item" @click="goToModule('agreementRule')">协议规则</div>
        </div>
        <div class="sub-module">
          <div class="sub-header">
            <i class="el-icon-notebook-2"></i>
            结算管理
          </div>
          <div class="sub-item" @click="goToModule('settlementRecord')">结算记录管理</div>
          <div class="sub-item" @click="goToModule('settlementProcess')">结算处理</div>
        </div>
        <div class="sub-module">
          <div class="sub-header">
            <i class="el-icon-wallet"></i>
            结算
          </div>
          <div class="sub-item" @click="goToModule('personalSettlement')">个人结算</div>
          <div class="sub-item" @click="goToModule('costAccounting')">成本核算</div>
        </div>
      </div>
    </div>

    <!-- 采购模块 -->
  <div class="module-card">
      <h4 class="module-title">
        <i class="el-icon-house"></i>
        采购模块
      </h4>
      <div class="module-grid cols-2">
        <div class="sub-module">
          <div class="sub-header">
            <i class="el-icon-box"></i>
            采购
          </div>
          <div class="sub-item" @click="goToModule('inbound')">货品管理</div>
          <div class="sub-item" @click="goToModule('warehouse')">采购执行</div>
          <div class="sub-item" @click="goToModule('warehouse')">采购调拨</div>
        </div>
        <div class="sub-module">
          <div class="sub-header">
            <i class="el-icon-box"></i>
            采购订单
          </div>
          <div class="sub-item" @click="goToModule('inbound')">订单生成</div>
          <div class="sub-item" @click="goToModule('warehouse')">订单维护</div>
        </div>
        <div class="sub-module">
          <div class="sub-header">
            <i class="el-icon-school"></i>
            采购计划
          </div>
          <div class="sub-item" @click="goToModule('warehouseManage')">需求预测</div>
          <div class="sub-item" @click="goToModule('warehouseManage')">计划维护</div>
        </div>
      </div>
    </div>

  </div>    
</template>

<style scoped>
.elegant-dashboard {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 改为3列 */
  grid-template-rows: repeat(2, auto);   /* 2行 */
  gap: 12px;
  padding: 16px;
  font-family: 'Helvetica Neue', Arial, sans-serif;
}

/* 保持卡片原有样式不变 */
.module-card {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  padding: 12px;
  transition: transform 0.3s;
  height: 100%; /* 确保高度统一 */
}

.module-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.08);
}

/* 调整模块内部布局为垂直排列 */
.module-grid {
  display: flex;
  flex-direction: column; /* 改为垂直排列 */
  gap: 8px;
}

/* 子模块样式调整 */
.sub-module {
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid #ebeef5;
  margin-bottom: 8px; /* 添加间距 */
}

/* 其他原有样式保持不变 */
.module-title {
  margin: 0 0 12px 0;
  font-size: 15px;
  color: #303133;
  display: flex;
  align-items: center;
  padding-bottom: 8px;
  border-bottom: 1px solid #ebeef5;
}

.module-title i {
  margin-right: 8px;
  color: #409EFF;
}

.sub-header {
  background: #f5f7fa;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 500;
  color: #606266;
  display: flex;
  align-items: center;
}

.sub-header i {
  margin-right: 6px;
  font-size: 14px;
  color: #909399;
}

.sub-item {
  padding: 8px 12px;
  font-size: 12px;
  color: #606266;
  cursor: pointer;
  transition: all 0.2s;
  border-top: 1px solid #ebeef5;
}

.sub-item:hover {
  background: #ecf5ff;
  color: #409EFF;
}

.sub-item:active {
  background: #d9ecff;
}

/* 响应式调整 - 小屏幕时改为2列 */
@media (max-width: 992px) {
  .elegant-dashboard {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 更小屏幕时改为1列 */
@media (max-width: 576px) {
  .elegant-dashboard {
    grid-template-columns: 1fr;
  }
}
</style>

<script setup name="Index">
import {onMounted , onUnmounted} from "vue";
import {pushMessage , sendAll,sendToUser} from "@/api/system/message.js";
import useUserStore from "@/store/modules/user.js";
import {useWebSocket} from "@/store/websocket.js";
import {ElNotification} from "element-plus";


const userStore = useUserStore()
const websocketStore = useWebSocket()
const version = ref('3.8.7')
let socket =null
let heartbeatTimer = null


const handleWebSocketMessage = (event) => {
 try {
   const message = JSON.parse(event.data)
   console.log('收到消息',message)
   ElNotification({
     title: message.title,
     type:'success'
   })
 }catch (error){
   console.log('解析消息失败',error)
 }
}

onMounted(() => {



  // pushMessage('test').then(response =>{
  //   console.log('成功被调用')
  //   console.log(response)
  // })
  //
  // sendAll(`我是${userStore.id}用户`).then(response =>{
  //   console.log('成功被调用')
  //   console.log(response)
  // })
  //
  // socket = new WebSocket(`ws://localhost:8080/websocket/${userStore.id}`)
  //
  // socket.onopen = () => {
  //   heartbeatTimer = setInterval(() => {
  //     if(socket.readyState === WebSocket.OPEN){
  //       socket.send(JSON.stringify({opt:'ping'}))
  //     }
  //   },3000)
  // }
  //
  // socket.onmessage = (event) => {
  //   console.log('Received Message: ',event.data)
  // }
  //
  // socket.onerror = (event) => {
  //   console.log('WebSocket Error: ',event)
  // }

})

onUnmounted(() => {

})

function sendMessageToUser(){
  const message = {
    title :'订单变更通知',
    content:'发送给特定用户的消息'
  }
  sendToUser(3,JSON.stringify(message)).then(response =>{
    console.log('成功被调用')
    console.log(response)
  })
}

function goTarget(url) {
  window.open(url, '__blank')
}

</script>